import React from "react";
import {  NavBar } from "react-vant";
import { useNavigate } from "react-router-dom";
import { Button, Input, Form } from "react-vant";

function Login() {
  const navigate = useNavigate();
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log(values);
    localStorage.setItem("username", values.username);
    localStorage.setItem("password", values.password);
    navigate("/");
    
  };

  return (
    <div>
      {/* 导航栏 */}
      <div>
        <NavBar title="登录" onClickLeft={() => navigate("-1")} />
      </div>
      {/* 标题 */}
      <div style={{ textAlign: "center", marginTop: "50px" }}>
        <h2>你好,安娜!</h2>
        <p style={{ color: "#ccc" }}>欢迎回来,大家都很想你!</p>
      </div>
      {/* 表单 */}
      <div style={{marginTop: "50px"}}>
        <Form
          form={form}
          onFinish={onFinish}
          footer={
            <div style={{ margin: "16px 16px 0" }}>
              <Button round nativeType="submit" type="primary" block>
                登录
              </Button>
              <Button round onClick={() => navigate("/zhu")}  type="warning" block style={{ marginTop: "10px"}}>
                注册
              </Button>
            </div>
          }
        >
          <Form.Item
            tooltip={{
              message:
                "A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.",
            }}
            intro="确保这是唯一的邮箱"
            rules={[{ required: true, message: "请填写正确的QQ或网易邮箱" ,pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/}]}
            name="username"
            label="邮箱"
          >
            <Input placeholder="请输入邮箱" />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: "请填写密码"}]}
            name="password"
            label="密码"
          >
            <Input placeholder="请输入密码" type="password" />
          </Form.Item>
          
        </Form>
      </div>
    </div>
  );
}

export default Login;
